<template>
  <view class="index-container">
    <!-- 注意事项 -->
    <view class="warning-box">
      <image class="warning-icon" src="/static/images/warning.png"></image>
      <text class="warning-message">{{ warningMessage }}</text>
    </view>

    <!-- 兑换表单 -->
    <view class="login-prompt">
      <view class="form-title">卡卷兑换</view>
      <view class="form-box">
        <!-- 卡号输入框 -->
        <view class="input-item">
          <text class="label">卡号</text>
          <input v-model="form.username" placeholder="请输入卡号" class="input" />
        </view>

        <!-- 卡密输入框 -->
        <view class="input-item">
          <text class="label">卡密</text>
          <input v-model="form.password" placeholder="请输入卡密" class="input" />
        </view>

        <!-- 确认提交按钮 -->
        <button class="submit-button" @click="handleSubmit">确认提交</button>
      </view>
    </view>

    <!-- 兑换说明 -->
    <view class="exchange-instructions">
      <text class="instructions-title">兑换说明</text>
      <view class="instructions-list">
        <text v-for="(item, index) in exchangeInstructions" :key="index" class="instruction-item">{{ item }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import {  exchangeCheckApi } from "@/api/card";
import { showToast, showLoading, hideLoading, showModal, showSuccess, showError, showWarning } from "@/utils/feedback";
const form = ref({
  username : '',
  password : ''
})
const warningMessage = "兑换一旦确认则无法退换，请务必确认兑换信息，不能有误！";

const exchangeInstructions = ref([
  "1、提交前仔细核对卡号、卡密正确无误，提交错误的卡号、卡密，将无法兑换成功。",
  "2、请仔细核对兑换卡的套餐内容，如已提交兑换则无法取消。",
  "3、平台24小时可提交兑换，系统自动处理。",
]);

const handleSubmit = async() => {
  // 提交表单逻辑
  if (!form.value.username) {
    showWarning("请输入卡号");
    return;
  }
  if (!/^[0-9a-zA-Z]+$/.test(form.value.username)) {
    showWarning("请输入正确的卡号");
    return;
  }
  if (!form.value.password) {
    showWarning("请输入卡密");
    return;
  }
  
  try {
    const res =  await exchangeCheckApi(form.value)
    if (res.code == 200) {
      showSuccess("卡密验证成功");
      setTimeout(() => {
        uni.redirectTo({
          url: `/pages/card/detail?card_id=${res.data.id}`
        });
      }, 1000);
    } else {
      showError(res.message);
    }
  } catch (error) {
    showError(error.message || "请求失败");
  }
};
</script>

<style scoped lang="scss">
.index-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.warning-box {
  display: flex;
  align-items: center;
  background-color: #f5e5e5;
  border: 1px solid #ffecec;
  border-radius: $uni-border-radius-base;;
  padding: 15px;
  gap: 10px;

  .warning-icon {
    width: 70px;
    height: 50px;
  }

  .warning-message {
    font-size: 14px;
    color: #666;
    line-height: 22px;
  }
}

.login-prompt {
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap:20px;
  border-radius: $uni-border-radius-base;;
  .form-title {
    font-size: 18px;
    color: #333;
  }

  .form-box {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .input-item {
      display: flex;
      align-items: center;
      gap: 10px;
      .label {
        font-size: 16px;
        color: #333;
      }

      .input {
        flex: 1;
        height: 24px;
        background-color: #f5f5f5;
        border: none; 
        border-radius: $uni-border-radius-base;; 
        padding: 10px;
        font-size: 16px;
        color: #333; 
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);

        &::placeholder {
          color: #999;
        }
      }
    }

    .submit-button {
      width: 100%;
      background-color: #409eff;
      color: #fff;
      border: none;
      border-radius: $uni-border-radius-base;;
      font-size: 16px;
      padding: 10px 0;
      margin-top: 20px;
    }
  }
}

.exchange-instructions {
  padding: 20px;
  background-color: #ffffff;
  border-radius: $uni-border-radius-base;;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .instructions-title {
    font-size: 16px;
    color: #409eff;
  }

  .instructions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .instruction-item {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>